<template>
	<div id="detailed">
		<div class="bottomLine">详细信息</div>
		<div class="bisic">
			<div class="detailedBox">
				<p class="detailedBoxtitle">基础信息</p>
				<div>
					<div>用户名</div>
					<div>账号</div>
					<div>用户类型</div>
					<div>所属机构</div>
					<div>联系电话</div>
					<div>邮箱</div>
					<div>来源</div>
					<div>{{this.userform.data_source == '0'?'创建时间':'同步时间'}}</div>
					<div>备注</div>
					<div>{{this.userform.data_source == '0'?'创建人':'操作人'}}</div>
				</div>
				<div></div>
				<div>
					<div v-html="fomatter(this.userform.person_name)">{{this.userform.person_name}}</div>
					<div v-html="fomatter(this.userform.user_name)">{{this.userform.user_name}}</div>
					<div v-html="personType(this.userform.person_type)">{{this.userform.person_type}}</div>
					<div v-html="this.userform.agency_name === '默认节点'?'无':this.userform.agency_name">{{this.userform.agency_name}}</div>
					<div v-html="fomatter(this.userform.mobile_phone)">{{this.userform.mobile_phone}}</div>
					<at-tooltip :content="this.userform.email" placement="top" v-if="this.emailShow">
						<div v-html="fomatterEmail(this.userform.email)" class="nortol">{{this.userform.email}}</div>
					</at-tooltip>
					<div v-html="fomatterEmail(this.userform.email)" v-else>{{this.userform.email}}</div>
					<div v-html="source(this.userform.data_source)">{{this.userform.data_source}}</div>
					<div>{{this.userform.d2t}}</div>
					<at-tooltip :content="this.userform.remark" placement="top" v-if="this.isShow">
						<div v-html="fomatters(this.userform.remark)" class="nortol">{{this.userform.remark}}</div>
					</at-tooltip>
					<div v-html="fomatters(this.userform.remark)" class="nortol" v-else>{{this.userform.remark}}</div>
					<div v-html="fomatter(this.userform.r_person)">{{this.userform.r_person}}</div>
				</div>
			</div>
		</div>
		<div class="bisic" style="padding-top:0px">
			<div class="detailedBoxbottom">
				<p class="detailedBoxtitle">基础信息</p>
				<div class="bottomDetailed">
					<div>所属用户组</div>
					<div>用户组角色</div>
					<div>功能权限</div>
				</div>
				<div></div>
				<div class="bottomDetailed">
					<div v-html="fomatter(this.userform.user_group_name)">{{this.userform.user_group_name}}
					</div>
					<at-tooltip :content="this.userform.role_name" placement="top" v-if="this.roleShow">
						<div v-html="fomatterRole(this.userform.role_name)">{{this.userform.role_name}}</div>
					</at-tooltip>
					<div v-html="fomatterRole(this.userform.role_name)" v-else>{{this.userform.role_name}}</div>
					<div>
						<at-tree style="margin-left:-20px;margin-top: -10px;padding: 0" :data="role" :props="defaultProps"
						 :highlight-current="true">
						</at-tree>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  props: {
	    personId: String,
	    required: true
	  },
	  name: 'newdetailed',
	  data () {
	    return {
	      defaultProps: {
	        children: 'children',
	        label: 'value'
	      },
	      isShow: false,
	      roleShow: false,
	      emailShow:false
	    }
	  },
	  computed: {
	    role: {
	      get () {
	        return this.$store.state.group.role
	      },
	      set (row) {
	        this.$store.state.group.role = row
	      }
	    },
	    ...mapState({
	      options: state => state.users.optionName, // 用户组选项信息
	      userform: state => state.users.personal, // 列表信息
	      loading: state => state.users.loading, // 加载状态
	      detailedFlag: state => state.users.detailedFlag
	    })
	  },
	  methods: {
	  	fomatterEmail (row) {
	      if (row == null || row === undefined || row === 'None' || row === '') {
	        this.emailShow = false
	        return '无信息'
	      } else {
	        if (row.length > 30) {
	          this.emailShow = true
	        } else {
	          this.emailShow = false
	        }
	        return row
	      }
	    },
	    fomatterRole (row) {
	      if (row == null || row === undefined || row === 'None' || row === '') {
	        this.roleShow = false
	        return '无信息'
	      } else {
	        if (row.length > 80) {
	          this.roleShow = true
	        } else {
	          this.roleShow = false
	        }
	        return row
	      }
	    },
	    fomatters (row) {
	      if (row == null || row === undefined || row === 'None' || row === '') {
	        this.isShow = false
	        return '无信息'
	      } else {
	        if (row.length > 40) {
	          this.isShow = true
	        } else {
	          this.isShow = false
	        }
	        return row
	      }
	    },
	    fomatter (row) {
	      if (row == null || row === undefined || row === 'None' || row === '') {
	        return '无信息'
	      } else {
	        return row
	      }
	    },
	    source (row) {
	      if (row === '0') {
	        return '同步'
	      } else {
	        return '本地'
	      }
	    },
	    personType (row) {
	      if (row == null || row === undefined || row === 'None' || row === '') {
	        return '无信息'
	      } else if (row === '1') {
	        return 'WEB外部用户'
	      } else {
	        return 'WEB内部用户'
	      }
	    }
	  },
	  watch: {
	    personId (val, oldval) {
	      this.$store.dispatch('user/getPersonal', { 'person_id': this.personId })
	    },
	    detailedFlag (val, oldval) {
	      this.$store.dispatch('user/getPersonal', { 'person_id': this.personId })
	    },
	    userform (val, oldval) {
	      // 监听form变化重新请求角色权限信息
	      if (val.role_group_id) {
	        var re = new RegExp(',', 'g')
	        var data = '\'' + val.role_group_id.replace(re, '\',\'') + '\''
	        this.$store.dispatch('group/getRolelist', { 'role_group_id': data })
	      } else {
	        this.role = []
	      }
	    }
	  }
	}
</script>
<style>
	.nortol {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 270px;
	}

	.bisic {
		padding: 20px 20px 20px 20px
	}

	#detailed .detailedBox div:nth-child(2)>div {
		text-align: right
	}

	#detailed .detailedBox div:nth-child(3)>div {
		text-align: left
	}

	#detailed .detailedBoxbottom>div:nth-child(2)>div {
		text-align: right;
	}

	#detailed .detailedBox>div>div {
		height: 40px;
		line-height: 40px;
	}

	#detailed .bottomDetailed {
		display: grid;
		grid-template-rows: 40px 80px auto
	}

	#detailed .bottomDetailed>div {
		padding-top: 10px
	}

	#detailed .detailedBoxtitle {
		grid-column: 1 / 4;
		border-bottom: 1px solid #EEE;
		font-size: 12px;
		color: #5c6781;
		height: 50px;
		line-height: 50px;
		padding-left: 10px;
		margin: 0;
		font-weight: bold;
	}

	#detailed .detailedBox {
		display: grid;
		grid-template-columns: 130px 40px auto;
		border: 1px solid #EEE
	}

	#detailed .detailedBoxbottom {
		display: grid;
		grid-template-columns: 130px 40px auto;
		border: 1px solid #EEE;
	}

	#detailed .roleName {
		width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block !important;
		float: right;
		margin-right: 1.1px;
	}

	#detailed .at-col {
		padding: 10px 20px 10px 20px;
		overflow: hidden;
	}

	#detailed .tittle {
		background-color: #f7f8fc;
		border: 1px solid #EEE;
		border-bottom: none;
		display: inline-block;
		width: 34.8%;
		height: 30px;
		line-height: 30px;
		text-align: right;
		padding-right: 20px
	}

	#detailed .atRow span:nth-child(2) {
		border: 1px solid #EEE;
		width: 65%;
		margin-left: -8px;
		height: 30px;
		line-height: 30px;
		display: inline-grid;
		padding-left: 20px;
		border-bottom: none;
		border-left: none;
	}

	#detailed #tree {
		display: inline-block;
		margin-left: 0px;
		height: 300px;
		overflow: auto;
	}

	#detailed .at-col .role {
		float: left;
		height: 300px;
	}

	#detailed {
		background-color: white;
		overflow: hidden;
		width: 100%;
	}

	#detailed .bottomLine {
		width: 100%;
		border-bottom: 1px solid #EEE;
		height: 50px;
		line-height: 50px;
		padding-left: 20px;
		font-weight: bold;
		color: #5c6781;
		font-size: 14px
	}
</style>